<template>
    <div class="payment">
        <!-- 导航栏 -->
        <tz-breadcrumb :title='["商家", "商家列表", nav]' :pathArr='[{"name": "商家"},{"name": "商家列表", "url": "/store-list"},{"name": nav}]'></tz-breadcrumb>
        <!-- tab选项卡 -->
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" :router='true'>
          <el-menu-item :index='"/set-store?store_code=" + store_code'>商户信息</el-menu-item>
          <el-menu-item :index='"/payment?store_code=" + store_code + "&id=" + id'>支付业务设置</el-menu-item>
          <el-menu-item :index='"/merge-pay-qr?store_code=" + store_code'>聚合收款码</el-menu-item>
          <el-menu-item :index='"/cashier-list?store_code=" + store_code'>收银员</el-menu-item>
          <el-menu-item :index='"/store-info?store_code=" + store_code'>详细资料</el-menu-item>

        </el-menu>
        <router-view></router-view>
        
    </div>
</template>

<script>
import tzBreadcrumb from './../../components/breadcrumb/breadcrumb.vue';
export default {
  components: {
    'tz-breadcrumb': tzBreadcrumb
  },
  data () {
    return {
      activeIndex: '/store-set?store_code=' + this.$route.query.store_code,
      nav: '商户信息',
      store_code: this.$route.query.store_code,
      id: this.$route.query.id
    };
  },
  methods: {
    handleSelect (key, val) {
      this.nav = (key === '/payment' ? '支付业务设置' : '商户信息');
    }
  }
};
</script>

<style lang="stylus" scoped>
.payment
  .el-menu-demo
    margin: 15px 0 10px 0
    box-shadow: 1px 1px 1px #999
    
</style>
